<template>
  <!-- 设置用户基本信息 -->
  <view class="settings">
    <!-- <view class="avator">
      <view class="inner" @tap="startImage">
        <img src="../../static/img/avator.svg" alt="" />
        <m-icon class="scan" type="camera"></m-icon>
      </view>
    </view> -->
    <view class="content">
      <uni-forms v-model="formData" ref="form" validateTrigger="bind" :rules="rules" @submit="submit">
        <uni-forms-item label="真实姓名" name="username" labelWidth="85" required>
          <input placeholder="请输入真实姓名" :value="formData.username" @blur="binddata('username', $event.detail.value)" />
        </uni-forms-item>
        <uni-forms-item label="证件号码" name="idCard" labelWidth="85" required>
          <input placeholder="请输入证件号码" :value="formData.idCard" @blur="binddata('idCard', $event.detail.value)" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="btn-row">
      <button class="primary" type="primary" :loading="btnLoading" @tap="handleSubmit">保存</button>
    </view>
  </view>
</template>
<script>
  import mIcon from '@/components/m-icon/m-icon.vue';
  import Api from '@/api/main';

  export default {
    components: {
      mIcon
    },
    data() {
      return {
        btnLoading: false,
        avator: '',
        rules: {
          username: {
            rules: [
            {
              required: true,
              errorMessage: '请输入姓名'
            }]
          },
          idCard: {
            rules: [
            {
              required: true,
              errorMessage: '请输入身份证号'
            }]
          },
        },
        // 表单数据
        formData: {
          // 姓名
          username: '',
          // 身份证
          idCard: '',
          // 手机号
          // phone: '',
        },
        genderList: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        },
        {
          label: '未知',
          value: 9
        }],
        nationList: ['汉族', '回族', '维吾尔族', '壮族', '其他少数民族'],
        educationList: ['小学', '初中', '高中/中专', '大专及以上', '不详'],
        isMarriedList: ['未婚', '已婚', '离异', '丧偶', '不详'],
        idTypeList: [
          // {
          //   id: 1,
          //   label: '身份证'
          // }
        ]
      };
    },
    methods: {

      // 提交表单
      handleSubmit() {
        if (this.btnLoading) {
          return;
        }
        this.$refs.form.submit();
      },

      // 提交表单&校验
      submit(event) {
        const { errors, value } = event.detail;
        console.log('event', event);
        if (errors) return;
        this.save(value);
      },

      // 保存表单
      async save(value) {
        this.btnLoading = true;
        const res = await this.$http.post(Api.addFamily, this.formData);

        console.log('value', this.formData);
        console.log('res', res);
        if (res) {
          this.$toast('保存成功');
          uni.navigateBack()
        }
        this.btnLoading = false;
      }
    }
  };
</script>
<style lang="scss">
  .settings {
    width: 100%;
    padding: 0 40rpx;

    button {
      width: 100%;
    }

    .avator {
      height: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f7fafd;

      .inner {
        position: relative;
      }

      .scan {
        position: absolute;
        right: 28rpx;
        bottom: 20rpx;
        color: $uni-color-primary;
        font-size: 48rpx;
      }

      img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        // background-color: ;
      }
    }

    .uni-list-cell-pd {
      margin-right: 20rpx;

      .uni-radio-wrapper {
        margin-right: 20rpx;
      }
    }

    label {
      font-size: 26rpx;
    }
  }

  picker {
    .inner>text {
      // font-size: 34rpx;
      color: $uni-text-color-placeholder;
    }
  }
</style>